
<fluent-dialog class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" b-dsxskpj5rr="" blazor:elementreference="">
  <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
      <div style="width: 100%;" tabindex="0">
          Header content
      </div>
    <fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="">
      <svg style="width: 20px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
        <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
      </svg>
    </fluent-button>
    <fluent-tooltip anchor="xxx" role="tooltip" aria-label="Tooltip" delay="300" blazor:ontooltipdismiss="2" position="bottom" blazor:elementreference=""></fluent-tooltip>
  </div>
  <div class="fluent-dialog-body">
    Body content
  </div>
  <div class="stack-horizontal fluent-dialog-footer" style="justify-content: start; align-items: end; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
    Footer content
  </div>
</fluent-dialog>
